import React, { useState } from 'react';
import './WaveProfit.css';

const WaveProfit = () => {
  const [activeTab, setActiveTab] = useState('mainline');

  // 模拟股票数据
  const stockData = [
    { id: 1, code: '000001', name: '平安银行', price: 12.45, change: 2.3, turnover: 1.2, volume: '15.6亿', marketCap: '2410亿' },
    { id: 2, code: '000002', name: '万科A', price: 18.76, change: -1.5, turnover: 0.8, volume: '8.9亿', marketCap: '2067亿' },
    { id: 3, code: '600036', name: '招商银行', price: 35.21, change: 1.8, turnover: 0.6, volume: '12.3亿', marketCap: '8956亿' },
  ];

  const renderStockTable = () => (
    <table className="stock-table">
      <thead>
        <tr>
          <th>序号</th>
          <th>代码</th>
          <th>名称</th>
          <th>价格</th>
          <th>涨幅(%)</th>
          <th>换手率(%)</th>
          <th>成交额</th>
          <th>流通市值</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        {stockData.map((stock) => (
          <tr key={stock.id}>
            <td>{stock.id}</td>
            <td>{stock.code}</td>
            <td>{stock.name}</td>
            <td>{stock.price}</td>
            <td className={stock.change >= 0 ? 'positive' : 'negative'}>
              {stock.change >= 0 ? '+' : ''}{stock.change}
            </td>
            <td>{stock.turnover}</td>
            <td>{stock.volume}</td>
            <td>{stock.marketCap}</td>
            <td>
              <button className="action-btn">详情</button>
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );

  return (
    <div className="wave-profit-container">
      {/* 大盘与板块区域 */}
      <div className="market-section">
        <div className="market-left">
          <h3>大盘分时与日K线图</h3>
        </div>
        <div className="market-right">
          <h3>板块分时与日K线图</h3>
        </div>
      </div>

      {/* 选股区域 */}
      <div className="stock-selection-section">
        <div className="selection-left">
          <h3>个股列表</h3>
          
          {/* 标签页 */}
          <div className="tabs-container">
            <div className="tabs-header">
              <button 
                className={`tab-btn ${activeTab === 'mainline' ? 'active' : ''}`}
                onClick={() => setActiveTab('mainline')}
              >
                主线波段
              </button>
              <button 
                className={`tab-btn ${activeTab === 'control' ? 'active' : ''}`}
                onClick={() => setActiveTab('control')}
              >
                主控波段
              </button>
            </div>
            
            <div className="tab-content">
              {/* 策略选择器和添加按钮 */}
              <div className="strategy-controls">
                <select className="strategy-selector">
                  <option value="">选择选股策略</option>
                  <option value="momentum">动量策略</option>
                  <option value="value">价值策略</option>
                  <option value="growth">成长策略</option>
                </select>
                <button className="add-strategy-btn">添加策略</button>
              </div>
              
              {/* 股票表格 */}
              <div className="table-container">
                {renderStockTable()}
              </div>
            </div>
          </div>
        </div>
        <div className="selection-right">
          <h3>个股分时图</h3>
        </div>
      </div>

      {/* 卖点条件区域 */}
      <div className="sell-condition-section">
        <div className="condition-left">
          <h3>列表</h3>
        </div>
        <div className="condition-right">
          <h3>表单</h3>
        </div>
      </div>
    </div>
  );
};

export default WaveProfit;